<template>
	<view>
		<!-- 顶部导航栏 -->
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">确认订单</block>
		</cu-custom>

		<!-- 消息提示 -->
		<message ref="message"></message>
		<view v-show="!showPay">
			<!-- 主体内容 -->
			<!-- 用户信息 -->
			<view class="cu-card bg-white margin align-center padding flex mu-radio">
				<view class="cuIcon-profile text-gray margin-right" style="font-size: 50rpx;"></view>
				<view class="text-lg">
					<view class="margin-right">学员名：{{realName}}</view>
					<view>手机号：{{phone}}</view>
				</view>
			</view>
			
			<!-- 课程信息 -->
			<view class="cu-card bg-white margin padding mu-radio">
				<view class="text-bold text-black text-xl">【{{course.classify}} 】 {{course.name}}</view>
				<view class="flex justify-between margin-top">
					<view class="text-gray">x1</view>
					<view class="text-price text-black text-bold text-lg">{{course.price}}</view>
				</view>
			</view>
			
			<view class="cu-card bg-white margin padding flex align-center mu-radio">
				<view class="cuIcon-pay text-gray margin-right" style="font-size: 50rpx;"></view>
				<radio-group class="text-black text-xl" @change="radioChange">
					<label class="flex align-center margin-bottom">
						<radio class="margin-right" :value="pay.alipay" style="transform: scale(0.6);" />
						<image src="../../../static/pay-type/alipay.png" style="width: 210rpx; height: 70rpx;" />
					</label>
					<label class="flex align-center margin-bottom">
						<radio class="margin-right" :value="pay.alipay" style="transform: scale(0.6);" />
						<image src="../../../static/pay-type/alipay.png" style="width: 210rpx; height: 70rpx;" />
					</label>
				</radio-group>
			</view>
			
			<!-- 底部提交的订单 -->
			<view class="cu-bar bg-white border foot flex align-center justify-between padding">
				<view class="text-bold text-red text-price text-xxl">{{course.price}}</view>
				<view class="btn-group">
					<button class="cu-btn bg-red round shadow-blur" style="width: 300rpx;"
						@click="submitOrder">提交订单</button>
				</view>
			</view>
		</view>
		
		<view v-show="showPay">
			<view class="cu-card bg-white margin padding">
				<view class="text-xl text-black margin-bottom">由于微信限制，请在浏览器中访问以下连接进行支付操作:</view>
				<view class="text-xl text-black margin-bottom" style="word-break: break-all;" @click="handleCopyUrl">{{toPayUrl}}</view>
				<view class="text-xl text-black margin-bottom">点击链接，可进行复制！</view>
				<view class="flex justify-center">
					<button class="cu-btn bg-olive" @click="handleToMyOrder">支付完成</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import setting from '@/settings.js'
	import {
		getCourseById
	} from '@/api/course.js'

	import {
		getInfo
	} from '@/api/user.js'

	import {
		createByStudentWap
	} from '@/api/order.js'

	// 支付方式代码
	const pay = {
		alipay: 1,
		wechat: 2,
		other: 3
	}

	export default {
		data() {
			return {
				id: undefined,
				course: {},
				realName: '',
				phone: '',
				pay,
				payType: undefined,
				formHtml: '',
				showPay: false,
				toPayUrl: ''
			}
		},
		created() {
			this.id = this.$store.getters.courseId
			this.getCourseInfo()
			this.getInfo()
		},
		methods: {
			getCourseInfo() {
				getCourseById(this.id).then(res => {
					this.course = res.data
				})
			},
			getInfo() {
				getInfo().then(res => {
					this.realName = res.data.realName
					this.phone = res.data.phone
				})
			},
			// 支付方式单选事件
			radioChange(e) {
				this.payType = e.detail.value
			},
			// 提交订单触发事件
			submitOrder() {
				const _this = this
				if (this.payType) {
					//#ifdef MP-WEIXIN
					wx.requestSubscribeMessage({
					  tmplIds: [setting.paySuccessMessageId],
					  success (res) {
						  const s = res[setting.paySuccessMessageId]
						  if (s === "accept") {
							  console.log("用户同意订阅该条id对应的模板消息");
						  } else if (s === "reject") {
							  console.log("用户拒绝订阅该条id对应的模板消息");
						  } else if (s === "ban") {
							  console.log("已被后台封禁");
						  } else {
							  console.log("该模板因为模板标题同名被后台过滤");
						  }
					  },
					  fail (err){
						  console.log("错误");
						  console.log(err);
					  },
					  complete() {
						  const data = {
						  	courseId: _this.id,
						  	payType: _this.payType
						  }
						  _this.createOrder(data)
						  console.log("调用结束");
					  }
					})
					//#endif
					
					// 除了微信小程序
					//#ifndef MP-WEIXIN
					const data = {
						courseId: this.id,
						payType: this.payType
					}
					this.createOrder(data)
					console.log("调用结束");
					//#endif
				} else {
					this.$refs.message.error({
						title: "请选择支付方式",
						duration: 2000
					})
				}
			},
			// 创建订单
			createOrder(data) {
				createByStudentWap(data).then(res => {
					this.$refs.message.success({
						title: res.msg,
						duration: 2000
					})
					// 现金支付,跳转订单详情页
					if (data.payType == pay.alipay) {
						// 支付宝支付
						this.toPayUrl = setting.payUrl + res.data
						this.showPay = true
						this.handleCopyUrl(true)
					}
				}).catch(err => {
					this.$refs.message.error({
						title: err.msg,
						duration: 2000
					})
				})
			},
			// 复制事件
			handleCopyUrl(show) {
				const _this = this
				uni.setClipboardData({
					data: this.toPayUrl,
					success: function () {
						if(!show) {
							_this.$refs.message.success({
								title: '复制成功',
								duration: 2000
							})
						}
					}
				});
			},
			handleToMyOrder() {
				uni.navigateTo({
					url: "/pages/order/my-order/my-order"
				})
			}
		}
	}
</script>

<style scoped>
	.mu-radio {
		border-radius: 10rpx;
	}
</style>
